<template>
  <div class="w-100 h-100">
    <div style="width: 100; height: 10%" class="d-flex justify-content-end">
      <FakeLegend
        style="margin: auto 30px auto 0px"
        :color="colorSingleList"
        :text="['地下蓄水池', '塑膜蓄水模块']"
      >
      </FakeLegend>
    </div>
    <div class="bottom">
      <div class="content">
        <div
          class="title d-flex justify-content-between"
          style="font-size: 20px; line-height: 40px; padding: 0 10px 0 10px"
        >
          <div>规划</div>
          <div>
            <span style="color: #667a8e">蓄水总量：</span>
            <span>{{ echrtsData[0].total }}</span>
            <span style="color: #667a8e">立方米</span>
          </div>
        </div>
        <div>
          <div
            class="d-flex justify-content-between"
            style="
              font-size: 20px;
              padding-right: 10px;
              height: 30px;
              margin-top: 10px;
            "
          >
            <div style="color: #5ce1ff">
              {{ (echrtsData[0].propotion * 100).toFixed(2) }}%
            </div>
            <div style="color: #b8eb8f">
              {{ (100 - echrtsData[0].propotion * 100).toFixed(2) }}%
            </div>
          </div>
        </div>
        <div class="bili">
          <div id="xu2_1" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="content">
        <div
          class="title d-flex justify-content-between"
          style="font-size: 20px; line-height: 40px; padding: 0 10px 0 10px"
        >
          <div>现状</div>
          <div>
            <span style="color: #667a8e">蓄水总量：</span>
            <span>{{ echrtsData[0].total }}</span>
            <span style="color: #667a8e">立方米</span>
          </div>
        </div>
        <div>
          <div
            class="d-flex justify-content-between"
            style="
              font-size: 20px;
              padding-right: 10px;
              height: 30px;
              margin-top: 10px;
            "
          >
            <div style="color: #5ce1ff">
              {{ (echrtsData[1].propotion * 100).toFixed(2) }}%
            </div>
            <div style="color: #b8eb8f">
              {{ (100 - echrtsData[1].propotion * 100).toFixed(2) }}%
            </div>
          </div>
        </div>
        <div class="bili">
          <div id="xu2_2" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
const guihua = ref(450);
const xianzhuang = ref(600);
const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];
var yLabel = ["一月"];
// var yData = [4800];
// var bgData = [11000];
const jsonData: any = inject("jsonData");

onBeforeMount(() => {
  echrtsData.value = props.echartsData

});
let yData = ref(0);
const echrtsData = ref();
onMounted(() => {
    let firstNum = [echrtsData.value[0].propotion * 100];
  console.log(yData.value, "yData.value");
  let secondNum = [echrtsData.value[1].propotion * 100];

  let option1 = {
    grid: {
      left: "0%",
      right: "0%",
      bottom: "10%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "value",
    },
    tooltip: {
      show: false,
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: false,
          margin: 15,
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
          // 调整左侧文字的3个属性，缺一不可
          verticalAlign: "bottom",
          align: "top",
          //调整文字上右下左
          padding: [0, 0, 25, 80],
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: yLabel,
      },
      {
        zlevel: 3,
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          show: false,
        },
        data: firstNum,
      },
    ],
    series: [
      {
        name: "销量",
        type: "bar",
        zlevel: 3,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(4,128,224,0)",
              },
              {
                offset: 1,
                color: "rgb(92, 225, 255)",
              },
            ]),
            shadowBlur: 0,
            shadowColor: "rgba(87,220,222,0.7)",
            // color:'rgb(43,196,253)'
          },
        },

        barWidth: 30,
        data: firstNum,
      },
      {
        z: 1,
        type: "pictorialBar",
        symbolPosition: "end",
        symbolRotate: "180",
        symbolSize: [40, 30],
        color: "rgb(92, 225, 255)",
        data: firstNum,
        symbol: "triangle",
        symbolOffset: ["52%", 0],
      },
      {
        // 背景
        type: "bar",
        barWidth: 30,
        barGap: "-100%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(4,128,224,0)",
              },
              {
                offset: 1,
                color: "rgb(184, 235, 143)",
              },
            ]),
            shadowBlur: 0,
            shadowColor: "rgba(87,220,222,0.7)",
            // color: 'rgb(184, 235, 143)',
          },
        },
        data: [100],
        z: 0,
      },
    ],
  };
  let option2 = {
    grid: {
      left: "0%",
      right: "0%",
      bottom: "10%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "value",
    },
    tooltip: {
      show: false,
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: false,
          margin: 15,
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
          // 调整左侧文字的3个属性，缺一不可
          verticalAlign: "bottom",
          align: "top",
          //调整文字上右下左
          padding: [0, 0, 25, 80],
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: yLabel,
      },
      {
        zlevel: 3,
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          show: false,
        },
        data: secondNum,
      },
    ],
    series: [
      {
        name: "销量",
        type: "bar",
        zlevel: 3,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(4,128,224,0)",
              },
              {
                offset: 1,
                color: "rgb(92, 225, 255)",
              },
            ]),
            shadowBlur: 0,
            shadowColor: "rgba(87,220,222,0.7)",
            // color:'rgb(43,196,253)'
          },
        },

        barWidth: 30,
        data: secondNum,
      },
      {
        z: 1,
        type: "pictorialBar",
        symbolPosition: "end",
        symbolRotate: "180",
        symbolSize: [40, 30],
        color: "rgb(92, 225, 255)",
        data: secondNum,
        symbol: "triangle",
        symbolOffset: ["52%", 0],
      },
      {
        // 背景
        type: "bar",
        barWidth: 30,
        barGap: "-100%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(4,128,224,0)",
              },
              {
                offset: 1,
                color: "rgb(184, 235, 143)",
              },
            ]),
            shadowBlur: 0,
            shadowColor: "rgba(87,220,222,0.7)",
            // color: 'rgb(184, 235, 143)',
          },
        },
        data: [100],
        z: 0,
      },
    ],
  };
  let myChart1 = echarts.init(document.getElementById("xu2_1") as HTMLElement);
  myChart1.setOption(option1);
  let myChart2 = echarts.init(document.getElementById("xu2_2") as HTMLElement);
  myChart2.setOption(option2);
});
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  height: 90%;
}
.content {
  width: 100%;
  height: 50%;
}
.title {
  width: 100%;
  height: 25%;
  background-color: #0f2d3c;
}
.bili {
  width: 100%;
  height: 55%;
  background-color: #052434;
}
</style>
